<template>
	<div class="searchResult" v-if="!loading">
		<el-form 
			inline
			size="small"
			label-width="80px"
			:model="searchForm">

			<el-form-item 
				v-for="(value, key) in searchForm"
				:key="key"
				:label="key">
				<el-input v-model="searchForm[key]"></el-input>
			</el-form-item>

			<el-form-item>
				<el-button type="primary" size="mini" @click="onSearch()">精确查询</el-button>
			</el-form-item>

		</el-form>

		<el-descriptions 
			title="查询结果"
			direction="vertical"
			:column="2"
			border>
			<el-descriptions-item
				v-for="item in fieldData"
				:key="item.id"
				:label="item.name">
				<span v-if="item.type=='文本'">{{ item.content }}</span>
				<img v-if="item.type=='图片'" :src='item.content' width="70" height="70">
			</el-descriptions-item>
		</el-descriptions>
	</div>
</template>

<script>
let ALLDATA_CACHE = [];
export default {
	name: "SearchResult",
	data() {
		return {
			loading: false,
			searchForm: {}, //表单以及字段名
			fieldData: [], //数据
		};
	},
	mounted() {
		this.getData();
		this.getMore();
	},
	methods: {
		async getData() {
			const tid = this.$route.query.table_id;
			const id = this.$route.query.id;
			this.loading = true;
			const fieldRes = await this.$api.getField(tid);
			if (fieldRes.code !== 0) {
				return;
			}
			const searchForm = {};
			const fieldData = [];
			fieldRes.result.forEach(item => {
				if (item.is_search) {
					searchForm[item.name] = '';
				}
				if (item.show_search) {
					fieldData.push(item);
				}
			});
			this.fieldData = fieldData;
			this.searchForm = searchForm;

			const res = await this.$api.getRows(tid, id);
			if (res.code !== 0) {
				return;
			}
			let data = res.result.data[0];
			data = Object.keys(data).filter(item => {
				return item.indexOf('$') === 0;
			}).map(item => {
				return data[item];
			});
			this.fieldData.forEach(item => {
				const isFind = data.find(i => i.field_id === item.id);
				if (!isFind) {
					return;
				}
				item.content = isFind.content;
			});
			console.log(this.fieldData)
			this.loading = false;
		},
		async getMore() {
			const res = await this.$api.getRows(this.$route.query.table_id, null, 1, 1000);
			ALLDATA_CACHE = res.result.data;
		},
		onSearch() {
			const searchs = Object.keys(this.searchForm).map(k => {
				return {
					field_id: this.fieldData.find(i => i.name === k).id,
					content: this.searchForm[k],
				};
			}).filter(item => item.content);
			let result;
			for (let i = 0, len = ALLDATA_CACHE.length; i < len; i++) {
				const dataItem = ALLDATA_CACHE[i];
				let isfind = false;
				for (const key in dataItem) {
					const value = dataItem[key];
					if (typeof value !== 'object' || !value) {
						continue;
					}
					const findContent = searchs.find(i => i.content === value.content);
					const findField = searchs.find(i => i.field_id === value.field_id);
					if (findContent && findField) {
						result = dataItem;
						isfind = true;
						break;
					}
				}
				if (isfind) {
					break;
				}
			}
			if (!result) {
				return this.$message.info('没查到数据');
			}
			result = Object.keys(result).filter(item => {
				return item.indexOf('$') === 0;
			}).map(item => {
				return result[item];
			});
			this.fieldData.forEach(item => {
				const isFind = result.find(i => i.field_id === item.id);
				item.content = isFind ? isFind.content : '';
			});
			this.$forceUpdate();
		}
	},
};
</script>

<style>
	.searchResult {
		width: 400px;
		max-width: 100%;
		padding: 30px;
		margin: 0 auto;
		border: 1px solid #ddd;
	}

	.serach-title {
		text-align: center;
		margin: 30px 0;
	}
</style>
